<template>
  <div class="home-recommend-item">
    <img v-lazy="hot.picture"/>
    <div class="bottom">
      <div class="ellipsis">{{ hot.title }}</div>
      <div class="ellipsis">{{ hot.alt }}</div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import type {Hot} from '@/types/category'
import {toRefs} from 'vue'

let props = defineProps<{
  data: Hot
}>()

let {data: hot} = toRefs(props)
</script>

<style lang="less"
       scoped>
.home-recommend-item {
  width: 306px;
  height: 406px;
  cursor: pointer;
  .hoverShadow();

  img {
    width: 306px;
    height: 306px;
  }

  .bottom {
    overflow: hidden;
    font-size: 22px;
    text-align: center;

    div:nth-of-type(1) {
      padding: 12px 30px;
    }

    div:nth-of-type(2) {
      font-size: 18px;
      color: #999999;
    }
  }
}
</style>